import React, { useState } from 'react';
import { Steps } from 'antd';
import BasicInformation from './BasicInformation';
import Materialinformation from './Materialinformation';
import SettlementInformation from './SettlementInformation';
import Productlaunch from './Productlaunch';
import style from './index.less';

const { Step } = Steps;

const CustomerDetail: React.FC = (props: any) => {
  const { location } = props;
  const userId = location.query;

  const [current, SetCurrent] = useState(0);

  const pageContent: any = {
    0: <BasicInformation userId={userId} />,
    1: <SettlementInformation />,
    2: <Materialinformation />,
    3: <Productlaunch />,
  };
  return (
    <div className={style.CustomerDetail}>
      <Steps
        current={current}
        onChange={(value) => {
          SetCurrent(value);
        }}
      >
        <Step title="基础信息" />
        <Step title="结算信息" />
        <Step title="材料信息" />
        <Step title="产品开通" />
      </Steps>
      {pageContent[current]}
    </div>
  );
};

export default CustomerDetail;
